<template>
        <!-- 操作交互区域 -->
        <div class="body-tabs">
            <van-tabs sticky v-model="active" animated line-height="2px" title-active-color="#3eafe0">
               <van-tab v-for="(item, index) in categoryList" :title="item.categoryName" :key="index" >
                 <div class="tabs-container">
                   <Careerhistory ref="careerhistoryRef" v-if="item.categoryName == '职业史'" />
                   <Radiologicalhistory v-else-if="item.categoryName == '放射职业史'" />
                   <Healthhistory  v-else-if="item.categoryName == '健康史'"/>
                   <Lifehistory v-else-if="item.categoryName == '生活史'" />
                   <Diseasehistory v-else-if="item.categoryName == '病史'" />
                   <Otherhistory v-else-if="item.categoryName == '其他'" />
                   <!-- <Medicalhistorydata v-else-if="item.categoryName == '健康资料'" /> -->
                  </div>
               </van-tab>
            </van-tabs>
        </div>
</template>
  
<script setup>
import Careerhistory from './components/Careerhistory.vue';
import Radiologicalhistory from './components/Radiologicalhistory.vue';
import Healthhistory from './components/Healthhistory.vue';
import Lifehistory from './components/Lifehistory.vue';
import Diseasehistory from './components/Diseasehistory.vue';
import Otherhistory from './components/Otherhistory.vue';
import Medicalhistorydata from './components/Medicalhistorydata.vue';
import { ref, reactive, toRefs } from 'vue';
    const active = ref(0);
    const categoryList = ref([
        {categoryName:'职业史',},
        {categoryName:'放射职业史',},
        {categoryName:'健康史',},
        {categoryName:'生活史',},
        {categoryName:'病史',},
        {categoryName:'其他',},
        // {categoryName:'健康资料',},

    ]);

    const getCompData = () =>{
        alert(0)
    }

defineExpose({
    getCompData,
});
</script>

<style scoped>
        .body-tabs {
            :deep(.van-sticky) {
             border-bottom: 2px solid #ddd;
            }
        
            .tabs-container {
                padding-bottom: 80px;
            }
        }

</style>